<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width: 700px;">
        <el-form :model="addApprovalForm" ref="addApprovalRef" :rules="addApprovalrules">
            <el-form-item label="审批状态" :label-width="formLabelWidth" prop="status">
                <el-select v-model="addApprovalForm.status" autocomplete="off" placeholder="请选择审批状态" clearable
                    style="width: 500px; ">
                    <el-option v-for="(item, index) in statusData" :key="index" :value="item.value"
                        :label="item.label"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="退费类型" :label-width="formLabelWidth" prop="type">
                <el-select v-model="addApprovalForm.type" autocomplete="off" placeholder="请选择退费类型" clearable
                    style="width: 500px; ">
                    <el-option v-for="(item, index) in typeData" :key="index" :value="item.value"
                        :label="item.label"></el-option>
                </el-select>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddApprovalCar",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "审批",
            personnelType: "",
            statusData: [
                {
                    label: "同意",
                    value: 1,
                },
                {
                    label: "拒绝-退费信息有误",
                    value: 3,
                },
            ],
            typeData: [
                {
                    value: 1,
                    label: '退学',
                },
                {
                    value: 2,
                    label: '建档立卡',
                },
                {
                    value: 3,
                    label: '其他',
                },
            ],
            addApprovalForm: {
                id: '',
                status: 1,
                type: "",

            },
            // 校验规则
            addApprovalrules: {
                status: vxRule(true, null, "blur"),
                type: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },

        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addApprovalForm.id = "";
            this.addApprovalForm.status = "";
            this.addApprovalForm.type = "";
        },
        save() {
            console.log(this.addApprovalForm);
            let params = new FormData();
            params.append("status", this.addApprovalForm.status);
            params.append("type", this.addApprovalForm.type);
            params.append("id", this.addApprovalForm.id);

            httpService("/javaApi/paymentRefund/edit", params, "post").then(
                (data) => {
                    if (data.code == 200) {
                        ElMessage.success("审批成功");
                        this.clear();
                        //刷新父组件的数据
                        this.$parent.getPaymentRefundList();
                    } else {
                        ElMessage.error("审批失败");
                    }
                }
            );

        },
    },
};
</script>
<style scoped>
.el-form-item__content {
    margin-left: 0 !important;
}

.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 10px;
}
</style>